
import { useState } from 'react'
import './App.css'

interface TodoItem {
  id: number; // 添加一个唯一的 id 来作为 key 的值，避免使用索引作为 key
  text: string;
}
function TodoList() {
  
      const [value,setValue]=useState('')
      const [list,setList]=useState<TodoItem[]>([])//类型注解

      // 添加一个计数器来使得id唯一
      const [idCounter, setIdCounter] = useState(0);

      const handleAdd=()=>{
        if(!value.trim())return
        setList([...list,{
          id:idCounter,
          text:value
        }])
        setValue('')
        setIdCounter(idCounter+1)
      }

      const HandleDelete=(id:number)=>{
       setList(list.filter((item)=>item.id!==id)) 
      }
   
  return (
    <>
    
    <div className='container'>
    <input type='text' placeholder='write down todo...' value={value} onChange={(e)=>{setValue(e.target.value)}} />
    <button onClick={handleAdd}>add</button>
    </div>
    <div>
    {
      list.map((item)=><div key={item.id}>
        {item.text}
        <button onClick={()=>HandleDelete(item.id)}>delete</button>
      </div>)
    }

    
    </div>

    </>
  )
}

export default TodoList
